<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="mainApp" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<r:require modules="jquery-ui, bootstrap-tab, crearViaje"/>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
</head>

<body>
	<script type="text/javascript">
		var eventosDirecciones = [ 
        <g:each in="${equipos}" var="equipo" status="index">
			{
				value:"${equipo?.direccion}",
				label:"${equipo?.posicionGeografica}"
			}
			<g:if test="${index < equipos.size() -1}">
			,
			</g:if>
		</g:each>
		]
	</script>
	
	<div id="errors">
		<g:hasErrors bean="${viajeInstance}">
			<ul class="errors" role="alert">
				<g:eachError bean="${viajeInstance}" var="error">
					<li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}"/></li>
				</g:eachError>
			</ul>
		</g:hasErrors>
	</div>

	<div class="row-fluid">
			<div class="span6">
				<ul class="nav nav-tabs" id="myTab">
					<li class="active" id="tab-inicio"><a href="#crear" data-toggle="tab">Trayecto</a></li>
					<li class="disabled" id="tab-precio"><a>Precio</a></li>
				</ul>
				<!-- /tabs -->
				<g:form name="formViaje" controller="nuevoViaje" action="guardarViaje">
					<g:hiddenField name="id" id="id" value="${viajeInstance?.id }" />
					<div class="tab-content">
						<div id="crear" class="tab-pane active well well-small">
							<fieldset>
								<div class="control-group">
									<label class="control-label">Seleccion&aacute; un equipo&nbsp;</label>
									<div class="controls">
										<g:render template="/templates/equiposSeleccionables" model="['equipos':equipos]"></g:render>
									</div>
								</div>
								<div class="control-group" id="eventosDeportivos">
									<label class="control-label" for="evento">Evento deportivo</label>
									<div class="controls">
										<g:render template="/templates/seleccionEventoDeportivo" model="[eventos:eventos, 'eventoId':viajeInstance?.evento?.id]"></g:render>
									</div>
								</div>
								
								<div class="control-group" id="controlGroupOrigen">
									<label class="control-label" for="origen">Origen:</label>
									<div class="controls">
										<div class="input-prepend span12">
											<span class="add-on"><i class="icon-map-marker"></i></span>
											<g:textField name="origen" id="origen" type="text" class="span8"
												maxLength="60" placeholder="Escriba un origen aquí"
												value="${viajeInstance?.origen?:usuarioLogueado?.casa?.direccion}" />
										</div>
										<g:hiddenField name="locationOrigen" id="locationOrigen" type="text" data-geoOrigen="location" />
										<g:if test="${viajeInstance.origen}">
											<g:hiddenField name="origenInicial" id="origenInicial" type="text" value="${viajeInstance.origen}"/>
											<g:hiddenField name="distanciaInicial" id="distanciaInicial" type="text"/>
										</g:if>
									</div>
								</div>
								
								<div class="control-group" id="controlGroupDestino">
									<label class="control-label" for="destino">Destino:</label>
									<div class="controls">
										<div class="input-prepend span12">
											<span class="add-on"><i class="icon-map-marker"></i></span>
											<g:textField name="destino" id="destino" class="span8"
												type="text" maxLength="60" placeholder="Escriba un destino aquí" value="${viajeInstance?.destino}" />
										</div>
										<g:hiddenField name="locationDestino" id="locationDestino" type="text" value="" data-geoDestino="location" />
									</div>
								</div>
								<div class="row-fluid">
									<div class="control-group span6" id="controlGroupFecha">
										<label class="control-label" for="fechaSalida">Fecha salida:</label>
										<div class="controls">
											<div class="input-prepend span12">
											 	<span class="add-on"><i class="icon-calendar"></i></span>
												<input  name="fechaSalida" id="fechaSalida" class="span11" type="text" value="${viajeInstance.fechaSalida?.format('dd/MM/yyyy')}">
												<input  name="fechaSalidaHidden" id="fechaSalidaHidden" type="hidden" value="${viajeInstance.fechaSalida?.format('dd/MM/yyyy')}">
											</div>
										</div>
									</div>
									<div class="span3">
										<label class="control-label" for="horaSalida">Hora:</label>
										<g:select name="horaSalida" from="${1..24}" class="span12" value="${viajeInstance?.horaSalida}" id="horaSalida"/>
									</div>
									<div class="span3">
										<label class="control-label" for="minutoSalida">Minuto:</label>
										<g:select name="minutoSalida" from="${0..59}" class="span12" value="${viajeInstance?.minutoSalida}" id="minutoSalida"/>
									</div>
								</div>
								
								<div class="form-actions text-center">
									<button class="btn btn-primary btn-large span3 centrar" id="btnContinuar" name="btnContinuar">Continuar</button>
								</div>
							</fieldset>
						</div>
						<div id="precio" class="tab-pane well well-small">
							<fieldset>
								<g:if test="${!viajeInstance.estaPublicada()}">
									<div class="control-group">
										<label class="control-label" for="precioAsiento">Precio por pasajero:</label>
										<div class="controls">
											<div class="input-prepend span12">
												<span class="add-on">$</span>
												<g:textField class="span3" style="text-align: right;" id="precioAsiento" name="precioAsiento" value="40" onkeypress="soloNumeros(event,false)" readonly="readonly"/>
												<span class="marginLeft5">
													<a class="btn btn-mini" id="masPrecio" href="#"><i class="icon-plus"></i></a>
													<a class="btn btn-mini" id="menosPrecio" href="#"><i class="icon-minus"></i></a>
												</span>
											</div>
										</div>
									</div>
								</g:if>
								<div class="control-group">
									<label class="control-label" for="asientosDisponibles">Asientos disponibles:</label>
									<div class="controls">
										<div class="input-prepend span12">
											<g:textField class="span1" style="text-align: right;" id="asientosDisponibles" value="${viajeInstance?.asientosDisponibles?:usuarioLogueado?.auto?.cantidadAsientos?:3}" name="asientosDisponibles" onkeypress="soloNumeros(event,false)" class="disabled" readonly="readonly"/>
											<span class="marginLeft5">
												<a class="btn btn-mini" id="masAsiento" href="#"><i class="icon-plus"></i></a>
												<a class="btn btn-mini" id="menosAsiento" href="#"><i class="icon-minus"></i></a>
											</span>
										</div>
									</div>
								</div>
								<g:if test="${viajeInstance.estaPublicada()}">
									<g:render template="/templates/participantesViaje" model="['viajeInstance':viajeInstance, 'usuarioLogueado':usuarioLogueado]"></g:render>
								</g:if>
								<g:if test="${!usuarioLogueado.tieneAuto() }">
									<div class="control-group" id="labelAgregarAuto">
										<label class="control-label" for="agregarAuto">Agregar auto:</label>
										<div class="controls">
											<a role="button" id="agregarAuto" class="btn" onclick="mostrarModalAgregarAuto();">Agregar auto</a>
											
										</div>
									</div>
								</g:if>
								<div class="control-group" id="divAuto" style="${!usuarioLogueado.tieneAuto()?'display: none;':'' }">
									<div class="controls" id="divTextoAuto">
										${usuarioLogueado.auto }
									</div>
								</div>
								<div class="control-group">
									<label class="control-label" for="detalles">Detalles:</label>
									<div class="controls">
										<g:textArea class="span8" name="detalle" id="detalle" rows="5" value="${viajeInstance.detalle }"></g:textArea>
									</div>
								</div>
								<hr />
								<g:if test="${!usuarioLogueado.tieneCuentaBancaria() }">
									<div class="control-group" id="labelAgregarCuenta">
										<label class="control-label" for="agregarCuenta">Agregar cuenta:</label>
										<div class="controls">
											<a role="button" id="agregarCuenta" class="btn" onclick="mostrarModalAgregarCuenta();">Agregar cuenta</a>
											
										</div>
									</div>
								</g:if>
								<div class="control-group" id="divCuenta" style="${!usuarioLogueado.tieneCuentaBancaria()?'display: none;':'' }">
									<div class="controls" id="divTextoCuenta">
										${usuarioLogueado.cuentaBancaria}
									</div>
								</div>
								<div class="form-actions text-center">
									<a href="#crear" class="btn btn-primary btn-large span3 centrar" id="btnVolver" data-toggle="tab">Volver</a>
									<button class="btn btn-primary btn-large span3 centrar" id="btnCrearViaje" name="btnCrearViaje">Continuar</button>
								</div>
							</fieldset>
						</div>
					</div>
				</g:form>
				<g:render template="/templates/modalAgregarAuto" model="['auto':usuarioLogueado?.auto, 'result': false, 'esModal':true]"></g:render>
				<g:render template="/templates/modalAgregarCuenta" model="['auto':usuarioLogueado?.cuentaBancaria, 'result': false, 'esModal':true]"></g:render>
				<!-- /.tab-content -->
			</div>
			<div class="span6" style="padding-top: 50px;">
				<div id="map-canvas" style="width: 400px; height: 300px; margin: 10px 20px 10px 0;"></div>
				&nbsp;
				<div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div>
				<h3>Distancia: </h3><div id="distancia"></div>
			</div>
	</div>
</body>
</html>